<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>功能模块 | Flutter Create Framework</title>
    <meta name="generator" content="VuePress 1.5.3">
    
    <meta name="description" content="Flutter Create Framework Doc">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="preload" href="/flutter-create-framework/assets/css/0.styles.8fb68239.css" as="style"><link rel="preload" href="/flutter-create-framework/assets/js/app.ae50095e.js" as="script"><link rel="preload" href="/flutter-create-framework/assets/js/2.c234afe8.js" as="script"><link rel="preload" href="/flutter-create-framework/assets/js/3.8c79cdc2.js" as="script"><link rel="prefetch" href="/flutter-create-framework/assets/js/10.bbfbb934.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/11.a8df6a1c.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/12.096d2e28.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/4.e40c4903.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/5.003cba5c.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/6.1ad019e8.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/7.f0229196.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/8.ccad4817.js"><link rel="prefetch" href="/flutter-create-framework/assets/js/9.4a4c6a06.js">
    <link rel="stylesheet" href="/flutter-create-framework/assets/css/0.styles.8fb68239.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/flutter-create-framework/" class="home-link router-link-active"><!----> <span class="site-name">Flutter Create Framework</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/1467602180/flutter-create-framework" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github(国外)
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/hfybbs/flutter-create-framework?_from=gitee_search" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee(国内)
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/1467602180/flutter-create-framework" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github(国外)
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/hfybbs/flutter-create-framework?_from=gitee_search" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee(国内)
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/flutter-create-framework/guide/" aria-current="page" class="sidebar-link">快速上手</a></li><li><a href="/flutter-create-framework/guide/directory.html" class="sidebar-link">目录结构</a></li><li><a href="/flutter-create-framework/guide/utils.html" aria-current="page" class="active sidebar-link">功能模块</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#网络请求" class="sidebar-link">网络请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#请求域名" class="sidebar-link">请求域名</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#请求超时" class="sidebar-link">请求超时</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#发送请求" class="sidebar-link">发送请求</a></li></ul></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#国际化" class="sidebar-link">国际化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#安装插件" class="sidebar-link">安装插件</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#配置与初始化" class="sidebar-link">配置与初始化</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#抽取字符串" class="sidebar-link">抽取字符串</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#使用" class="sidebar-link">使用</a></li></ul></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#mock服务" class="sidebar-link">Mock服务</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#增加mock规则" class="sidebar-link">增加mock规则</a></li></ul></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#路由" class="sidebar-link">路由</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#新增路由" class="sidebar-link">新增路由</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#嵌套路由" class="sidebar-link">嵌套路由</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#路由跳转" class="sidebar-link">路由跳转</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#自定义路由" class="sidebar-link">自定义路由</a></li></ul></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#调试打印" class="sidebar-link">调试打印</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#开启调试" class="sidebar-link">开启调试</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#使用-2" class="sidebar-link">使用</a></li></ul></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#状态管理" class="sidebar-link">状态管理</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#主题配置" class="sidebar-link">主题配置</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#工具集" class="sidebar-link">工具集</a></li><li class="sidebar-sub-header"><a href="/flutter-create-framework/guide/utils.html#发布订阅事件流" class="sidebar-link">发布订阅事件流</a></li></ul></li><li><a href="/flutter-create-framework/guide/about.html" class="sidebar-link">关于</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="功能模块"><a href="#功能模块" class="header-anchor">#</a> 功能模块</h1> <h2 id="网络请求"><a href="#网络请求" class="header-anchor">#</a> 网络请求</h2> <h3 id="请求域名"><a href="#请求域名" class="header-anchor">#</a> 请求域名</h3> <p>位于：<code>/lib/util/request_util.dart</code></p> <p><img src="" alt="image-20200812174938462"></p> <h3 id="请求超时"><a href="#请求超时" class="header-anchor">#</a> 请求超时</h3> <p>位于：<code>/lib/util/request_util.dart</code></p> <p><img src="" alt="image-20200812175247159"></p> <h3 id="发送请求"><a href="#发送请求" class="header-anchor">#</a> 发送请求</h3> <p>参考示例文件<code>/lib/api/user_info_api.dart</code>，新建个类似的示例：</p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string">'package:dio/dio.dart'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'package:flutter_create_framework/util/request_util.dart'</span><span class="token punctuation">;</span>

Future<span class="token operator">&lt;</span>Response<span class="token operator">&gt;</span> <span class="token function">UserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token keyword">async</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">Request</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&quot;/userinfo&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>然后在业务代码中调用该方法即可，参考示例文件：<code>/lib/layout/mockRequest/mock_request.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token function">UserInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        data <span class="token operator">=</span> value<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token string">&quot;data&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="国际化"><a href="#国际化" class="header-anchor">#</a> 国际化</h2> <h3 id="安装插件"><a href="#安装插件" class="header-anchor">#</a> 安装插件</h3> <p>插件可以帮助我们快速的生成国际化代码，以Android Studio为例：</p> <p><code>File --&gt; Settings… --&gt; Plugins --&gt; 搜索“flutter Intl”，安装该插件，重启AndroidStudio</code></p> <h3 id="配置与初始化"><a href="#配置与初始化" class="header-anchor">#</a> 配置与初始化</h3> <h4 id="配置"><a href="#配置" class="header-anchor">#</a> 配置</h4> <p>pubspec.yaml文件新增本地化依赖：</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">dependencies</span><span class="token punctuation">:</span>
    // Other dependencies<span class="token punctuation">...</span>
    <span class="token key atrule">flutter_localizations</span><span class="token punctuation">:</span>
        <span class="token key atrule">sdk</span><span class="token punctuation">:</span> flutter
</code></pre></div><p>然后flutter pub get获取该依赖</p> <h4 id="工程初始化"><a href="#工程初始化" class="header-anchor">#</a> 工程初始化</h4> <p>在菜单栏的Tool下找到Flutter Intl 并选择Initalize for the project，配置结束之后，会自动在 pubspec.yaml中增加以下字段：</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">flutter_intl</span><span class="token punctuation">:</span>  
    <span class="token key atrule">enabled</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
</code></pre></div><p>会在lib目录下增加 generated 和 l10n两个包，框架下的目录就是如此生成的</p> <h4 id="代码初始化"><a href="#代码初始化" class="header-anchor">#</a> 代码初始化</h4> <p>框架已经做了这一步，想深入的可以了解一下</p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'package:flutter_localizations/flutter_localizations.dart'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'generated/l10n.dart'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata symbol">@override</span>
  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span>
      localizationsDelegates<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
        S<span class="token punctuation">.</span>delegate<span class="token punctuation">,</span>
        GlobalMaterialLocalizations<span class="token punctuation">.</span>delegate<span class="token punctuation">,</span>
        GlobalCupertinoLocalizations<span class="token punctuation">.</span>delegate<span class="token punctuation">,</span>
        GlobalWidgetsLocalizations<span class="token punctuation">.</span>delegate
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token comment">//supportedLocales: S.delegate.supportedLocales,</span>
      <span class="token comment">// 设置中文为首选项</span>
      supportedLocales<span class="token punctuation">:</span> S<span class="token punctuation">.</span>delegate<span class="token punctuation">.</span>supportedLocales<span class="token punctuation">,</span>
      <span class="token comment">// 获取翻译文案的内容需要在能获取到上下文的前提下才能生效，也就是说只能对MaterialApp</span>
      <span class="token comment">// 的子组件才会生效，所以下面的方法设置动态Title是不行的，需要使用回调方法onGenerateTitle</span>
      <span class="token comment">//title: S.of(context).app_name,</span>
      onGenerateTitle<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> S<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>app_name<span class="token punctuation">,</span>
      <span class="token comment">//home: MyHomePage(title: S.of(context).main_message),</span>
      home<span class="token punctuation">:</span> <span class="token function">MyHomePage</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token string">'Flutter Demo Home Page'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="抽取字符串"><a href="#抽取字符串" class="header-anchor">#</a> 抽取字符串</h3> <h4 id="新建需要支持的语言文件"><a href="#新建需要支持的语言文件" class="header-anchor">#</a> 新建需要支持的语言文件</h4> <p>在lib/I10n文件夹右键 --&gt; New --&gt; Arb File，输入对应的locale code，如“zh”。
或者在Tools --&gt; Flutter Intl --&gt; Add Locale，效果是一样的。</p> <h4 id="抽取字符串-2"><a href="#抽取字符串-2" class="header-anchor">#</a> 抽取字符串</h4> <p>选中字符串或者在字符串后面按快捷键“Alt + Enter” --&gt; Extract to ARB file
勾选该字符串要抽取到哪些Arb文件，其实就是在各个arb文件下添加相应的字符串字段，需要到对应的arb文件修改成相应语言的字符串。</p> <h3 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h3> <p>在需要配置国际化的地方调用<code>S.of(context).字符串字段</code>即可</p> <p>一些方法：</p> <div class="language-dart extra-class"><pre class="language-dart"><code># 强制使用某种语言
S<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token function">Locale</span><span class="token punctuation">(</span><span class="token string">'de'</span><span class="token punctuation">,</span> <span class="token string">'DE'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
# 获取当前语言
Intl<span class="token punctuation">.</span><span class="token function">getCurrentLocale</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="mock服务"><a href="#mock服务" class="header-anchor">#</a> Mock服务</h2> <p>该模块的核心在于 <a href="https://pub.flutter-io.cn/packages/dio" target="_blank" rel="noopener noreferrer">dio<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>提供的返回自定义数据功能，代码位于：<code>/lib/util/request_util.dart</code></p> <p><img src="/flutter-create-framework/assets/img/image-20200812182417960.946786f8.png" alt="image-20200812182417960"></p> <h3 id="增加mock规则"><a href="#增加mock规则" class="header-anchor">#</a> 增加mock规则</h3> <p>该模块通过 <a href="https://pub.flutter-io.cn/packages/faker" target="_blank" rel="noopener noreferrer">faker<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>包，可以定义十分真实的返回数据</p> <p>示例代码位于：<code>/lib/mock/role/user_info_role.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string">'package:faker/faker.dart'</span><span class="token punctuation">;</span>

List <span class="token function">UserInfoRole</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">'/userinfo'</span><span class="token punctuation">,</span>
      <span class="token string">&quot;method&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;response&quot;</span><span class="token punctuation">:</span><span class="token punctuation">{</span>
        <span class="token string">&quot;status&quot;</span><span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">,</span>
        <span class="token string">&quot;data&quot;</span><span class="token punctuation">:</span><span class="token punctuation">{</span>
          <span class="token string">&quot;username&quot;</span><span class="token punctuation">:</span>faker<span class="token punctuation">.</span>internet<span class="token punctuation">.</span><span class="token function">userName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token string">&quot;email&quot;</span><span class="token punctuation">:</span>faker<span class="token punctuation">.</span>internet<span class="token punctuation">.</span><span class="token function">email</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token string">&quot;address&quot;</span><span class="token punctuation">:</span>faker<span class="token punctuation">.</span>address<span class="token punctuation">.</span><span class="token function">city</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>其中<code>path</code>和<code>method</code>就是匹配的规则，每一次的request的请求都会遍历一次规则，符合规则即返回自定义的返回数据</p> <h2 id="路由"><a href="#路由" class="header-anchor">#</a> 路由</h2> <p>框架的路由是基于官方的路由进行了简单封装，核心代码位于：<code>/lib/router/router.dart</code></p> <h3 id="新增路由"><a href="#新增路由" class="header-anchor">#</a> 新增路由</h3> <p>参考示例文件：<code>/lib/router/routes.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code>List<span class="token operator">&lt;</span>Map<span class="token operator">&lt;</span>String<span class="token punctuation">,</span><span class="token keyword">dynamic</span><span class="token operator">&gt;&gt;</span> <span class="token function">Routes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/changeLanguage&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">ChangeLanguage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/stateManage&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">StateManage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/editStateManage&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">EditStateManage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/mockRequest&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">MockRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/mockRequest&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">MockRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/utilsManage&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">UtilsManage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>按格式增加路由即可，后续会考虑增加<code>路由动画</code>等功能</p> <h3 id="嵌套路由"><a href="#嵌套路由" class="header-anchor">#</a> 嵌套路由</h3> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">//嵌套路由示例</span>
<span class="token punctuation">{</span>
    <span class="token comment">// 上层路由无需view</span>
    <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/busManage&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;children&quot;</span><span class="token punctuation">:</span><span class="token punctuation">[</span>
        <span class="token comment">// 匹配规则为&quot;/busManage/demo1&quot;</span>
        <span class="token punctuation">{</span>
            <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/demo1&quot;</span><span class="token punctuation">,</span>
            <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">Demo1</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token comment">// 匹配规则为&quot;/busManage/demo2/demo3&quot;</span>
            <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/demo2&quot;</span><span class="token punctuation">,</span>
            <span class="token string">&quot;children&quot;</span><span class="token punctuation">:</span><span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    <span class="token string">&quot;path&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;/demo3&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;view&quot;</span><span class="token punctuation">:</span><span class="token function">Demo3</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="路由跳转"><a href="#路由跳转" class="header-anchor">#</a> 路由跳转</h3> <p>按照官方的路由方式操作即可</p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">// 跳转</span>
Navigator<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pushNamed</span><span class="token punctuation">(</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 后退</span>
Navigator<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 替换当前路由</span>
Navigator<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pushReplacementNamed</span><span class="token punctuation">(</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 跳转路由并删除所有路由</span>
Navigator<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pushNamedAndRemoveUntil</span><span class="token punctuation">(</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>route<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="自定义路由"><a href="#自定义路由" class="header-anchor">#</a> 自定义路由</h3> <p>封装实现的动画路由，可自定义动画，传参，核心封装代码位于<code>util/router_util.dart</code></p> <h4 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h4> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">//mode为动画方式，slide：平滑，fade:渐变，scale：缩放，rotation：旋转，rotationScale：旋转缩放，默认为平滑动画</span>
<span class="token comment">//argument为传参，下个页面直接使用argument即可</span>
<span class="token comment">// 跳转</span>
RouterUtil<span class="token punctuation">.</span><span class="token function">pushNamed</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>mode<span class="token punctuation">:</span><span class="token string">'slide'</span><span class="token punctuation">,</span>argument<span class="token punctuation">:</span><span class="token string">'params'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 替换当前路由</span>
RouterUtil<span class="token punctuation">.</span><span class="token function">pushReplacementNamed</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>mode<span class="token punctuation">:</span><span class="token string">'slide'</span><span class="token punctuation">,</span>argument<span class="token punctuation">:</span><span class="token string">'params'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 跳转路由并删除所有路由</span>
RouterUtil<span class="token punctuation">.</span><span class="token function">pushNamedAndRemoveUntil</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>mode<span class="token punctuation">:</span><span class="token string">'slide'</span><span class="token punctuation">,</span>argument<span class="token punctuation">:</span><span class="token string">'params'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="自定义动画"><a href="#自定义动画" class="header-anchor">#</a> 自定义动画</h4> <p>核心代码在<code>util/router_util.dart</code>的<code>66</code>行</p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">switch</span> <span class="token punctuation">(</span>mode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">case</span> <span class="token string">'slide'</span><span class="token punctuation">:</span>
                  routerWidget <span class="token operator">=</span> <span class="token function">SlideTransition</span><span class="token punctuation">(</span>
                    child<span class="token punctuation">:</span> child<span class="token punctuation">,</span>
                    position<span class="token punctuation">:</span> Tween<span class="token operator">&lt;</span>Offset<span class="token operator">&gt;</span><span class="token punctuation">(</span>
                            begin<span class="token punctuation">:</span> <span class="token function">Offset</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token function">Offset</span><span class="token punctuation">(</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
                        <span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token function">CurvedAnimation</span><span class="token punctuation">(</span>
                            parent<span class="token punctuation">:</span> animation1<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> Curves<span class="token punctuation">.</span>ease<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                  <span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">'fade'</span><span class="token punctuation">:</span>
                  routerWidget <span class="token operator">=</span> <span class="token function">FadeTransition</span><span class="token punctuation">(</span>
                    child<span class="token punctuation">:</span> child<span class="token punctuation">,</span>
                    opacity<span class="token punctuation">:</span> <span class="token function">Tween</span><span class="token punctuation">(</span>begin<span class="token punctuation">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span>
                        <span class="token function">CurvedAnimation</span><span class="token punctuation">(</span>
                            parent<span class="token punctuation">:</span> animation1<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> Curves<span class="token punctuation">.</span>linear<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                  <span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">'scale'</span><span class="token punctuation">:</span>
                  routerWidget <span class="token operator">=</span> <span class="token function">ScaleTransition</span><span class="token punctuation">(</span>
                    child<span class="token punctuation">:</span> child<span class="token punctuation">,</span>
                    scale<span class="token punctuation">:</span> <span class="token function">Tween</span><span class="token punctuation">(</span>begin<span class="token punctuation">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token function">CurvedAnimation</span><span class="token punctuation">(</span>
                        parent<span class="token punctuation">:</span> animation1<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> Curves<span class="token punctuation">.</span>linear<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                  <span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">'rotation'</span><span class="token punctuation">:</span>
                  routerWidget <span class="token operator">=</span> <span class="token function">RotationTransition</span><span class="token punctuation">(</span>
                    child<span class="token punctuation">:</span> child<span class="token punctuation">,</span>
                    turns<span class="token punctuation">:</span> <span class="token function">Tween</span><span class="token punctuation">(</span>begin<span class="token punctuation">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token function">CurvedAnimation</span><span class="token punctuation">(</span>
                        parent<span class="token punctuation">:</span> animation1<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> Curves<span class="token punctuation">.</span>linear<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                  <span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">'rotationScale'</span><span class="token punctuation">:</span>
                  routerWidget <span class="token operator">=</span> <span class="token function">RotationTransition</span><span class="token punctuation">(</span>
                    child<span class="token punctuation">:</span> <span class="token function">ScaleTransition</span><span class="token punctuation">(</span>
                      child<span class="token punctuation">:</span> child<span class="token punctuation">,</span>
                      scale<span class="token punctuation">:</span> <span class="token function">Tween</span><span class="token punctuation">(</span>begin<span class="token punctuation">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span>
                          <span class="token function">CurvedAnimation</span><span class="token punctuation">(</span>
                              parent<span class="token punctuation">:</span> animation1<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> Curves<span class="token punctuation">.</span>linear<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token punctuation">)</span><span class="token punctuation">,</span>
                    turns<span class="token punctuation">:</span> <span class="token function">Tween</span><span class="token punctuation">(</span>begin<span class="token punctuation">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token function">CurvedAnimation</span><span class="token punctuation">(</span>
                        parent<span class="token punctuation">:</span> animation1<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> Curves<span class="token punctuation">.</span>linear<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                  <span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token keyword">break</span><span class="token punctuation">;</span>
              <span class="token punctuation">}</span>
<span class="token comment">//需要自定义动画直接在后面添加即可，判断的是mode的值</span>
</code></pre></div><h2 id="调试打印"><a href="#调试打印" class="header-anchor">#</a> 调试打印</h2> <p>基于 <a href="https://pub.flutter-io.cn/packages/logger" target="_blank" rel="noopener noreferrer">logger<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>库封装了一个调试打印的工具类，可打印<code>Object</code></p> <h3 id="开启调试"><a href="#开启调试" class="header-anchor">#</a> 开启调试</h3> <p>位于<code>/lib/config/server_config.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">ServerConfig</span><span class="token punctuation">{</span>
  <span class="token comment">//  是否为调试模式，是则打印日志</span>
  bool <span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>仅作用于使用该工具类的调试输出</p> <h3 id="使用-2"><a href="#使用-2" class="header-anchor">#</a> 使用</h3> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">// 调试输出</span>
LoggerUtil<span class="token punctuation">.</span><span class="token function">d</span><span class="token punctuation">(</span>optionsMap<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>一般使用调试输出即可</p> <p>核心代码位于<code>/lib/util/logger_util.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">LoggerUtil</span><span class="token punctuation">{</span>
  LoggerUtil<span class="token punctuation">.</span><span class="token function">v</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> v<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">ServerConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">Logger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">v</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 调试</span>
  LoggerUtil<span class="token punctuation">.</span><span class="token function">d</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> d<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">ServerConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">Logger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">d</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 信息</span>
  LoggerUtil<span class="token punctuation">.</span><span class="token function">i</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> i<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">ServerConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">Logger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">i</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 错误</span>
  LoggerUtil<span class="token punctuation">.</span><span class="token function">e</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> e<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">ServerConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">Logger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">e</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 警告</span>
  LoggerUtil<span class="token punctuation">.</span><span class="token function">w</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> w<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">ServerConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">Logger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">w</span><span class="token punctuation">(</span>w<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// WTF</span>
  LoggerUtil<span class="token punctuation">.</span><span class="token function">wtf</span><span class="token punctuation">(</span><span class="token keyword">dynamic</span> wtf<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">ServerConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Debug</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">Logger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">wtf</span><span class="token punctuation">(</span>wtf<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="状态管理"><a href="#状态管理" class="header-anchor">#</a> 状态管理</h2> <p>基于 <a href="https://pub.flutter-io.cn/packages/provider" target="_blank" rel="noopener noreferrer">provider<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>库，示例代码位于：<code>/lib/provider/user_provider.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">UserProvider</span> <span class="token keyword">with</span> ChangeNotifier<span class="token punctuation">{</span>

<span class="token comment">//  用户名</span>
  String _username <span class="token operator">=</span> <span class="token string">'Test User'</span><span class="token punctuation">;</span>
  <span class="token keyword">get</span> username <span class="token operator">=</span><span class="token operator">&gt;</span> _username<span class="token punctuation">;</span>

  <span class="token keyword">void</span> <span class="token function">setUserName</span><span class="token punctuation">(</span>String username<span class="token punctuation">)</span><span class="token punctuation">{</span>
    _username <span class="token operator">=</span> username<span class="token punctuation">;</span>
    <span class="token function">notifyListeners</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

<span class="token comment">//  手机号</span>
  String _phone <span class="token operator">=</span> <span class="token string">'13243737777'</span><span class="token punctuation">;</span>
  <span class="token keyword">get</span> phone <span class="token operator">=</span><span class="token operator">&gt;</span> _phone<span class="token punctuation">;</span>

  <span class="token keyword">void</span> <span class="token function">setPhone</span><span class="token punctuation">(</span>String phone<span class="token punctuation">)</span><span class="token punctuation">{</span>
    _phone <span class="token operator">=</span> phone<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

<span class="token comment">//  地址</span>
  String _address <span class="token operator">=</span> <span class="token string">'GuangZhou'</span><span class="token punctuation">;</span>
  <span class="token keyword">get</span> address <span class="token operator">=</span><span class="token operator">&gt;</span> _address<span class="token punctuation">;</span>

  <span class="token keyword">void</span> <span class="token function">setAddress</span><span class="token punctuation">(</span>String address<span class="token punctuation">)</span><span class="token punctuation">{</span>
    _address <span class="token operator">=</span> address<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

<span class="token punctuation">}</span>
</code></pre></div><p>然后在<code>/lib/main.dart</code>中引用</p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token keyword">async</span><span class="token punctuation">{</span>
  WidgetsFlutterBinding<span class="token punctuation">.</span><span class="token function">ensureInitialized</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">await</span> SpUtil<span class="token punctuation">.</span><span class="token function">getInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span>
    <span class="token function">MultiProvider</span><span class="token punctuation">(</span>providers<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token function">ChangeNotifierProvider</span><span class="token punctuation">(</span>create<span class="token punctuation">:</span> <span class="token punctuation">(</span>_<span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">&gt;</span><span class="token function">UserProvider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>child<span class="token punctuation">:</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>之后便可以在项目中直接使用</p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">// 示例方法</span>

<span class="token comment">//绑定UserProvider中的username</span>
context<span class="token punctuation">.</span>watch<span class="token operator">&lt;</span>UserProvider<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>username
<span class="token comment">//调用UserProvider中的setUserName方法</span>
context<span class="token punctuation">.</span>read<span class="token operator">&lt;</span>UserProvider<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setUserName</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//或者</span>
Provider<span class="token punctuation">.</span>of<span class="token operator">&lt;</span>UserProvider<span class="token operator">&gt;</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span>listen<span class="token punctuation">:</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">.</span>username<span class="token punctuation">;</span>
Provider<span class="token punctuation">.</span>of<span class="token operator">&lt;</span>UserProvider<span class="token operator">&gt;</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span>listen<span class="token punctuation">:</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setUserName</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//最终结果是一致的，差异就是第二种方法不用区分watch和read</span>
<span class="token comment">//更多用法你应该去看官方的api文档</span>
</code></pre></div><h2 id="主题配置"><a href="#主题配置" class="header-anchor">#</a> 主题配置</h2> <p>位于<code>/lib/config/theme_config.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">//主题配置</span>
ThemeData <span class="token function">ThemeConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">ThemeData</span><span class="token punctuation">(</span>
    primarySwatch<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
    visualDensity<span class="token punctuation">:</span> VisualDensity<span class="token punctuation">.</span>adaptivePlatformDensity<span class="token punctuation">,</span>
    primaryColor<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>white<span class="token punctuation">,</span> <span class="token comment">//主色调</span>
    appBarTheme<span class="token punctuation">:</span> <span class="token function">AppBarTheme</span><span class="token punctuation">(</span>
      elevation<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token comment">//导航栏阴影</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
    scaffoldBackgroundColor<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>white<span class="token punctuation">,</span> <span class="token comment">//背景颜色</span>
    highlightColor<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>white<span class="token punctuation">,</span> <span class="token comment">//高亮颜色</span>
    splashColor<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>white<span class="token punctuation">,</span> <span class="token comment">//波纹颜色</span>
    inputDecorationTheme<span class="token punctuation">:</span> <span class="token function">InputDecorationTheme</span><span class="token punctuation">(</span>
      labelStyle<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>black<span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="工具集"><a href="#工具集" class="header-anchor">#</a> 工具集</h2> <p>参考库 <a href="https://pub.flutter-io.cn/packages/flustars" target="_blank" rel="noopener noreferrer">flustars<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="发布订阅事件流"><a href="#发布订阅事件流" class="header-anchor">#</a> 发布订阅事件流</h2> <p>基于<a href="https://github.com/Fliggy-Mobile/fbroadcast/blob/master/README_CN.md" target="_blank" rel="noopener noreferrer">fbroadcast<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>库进行了简单的封装而成</p> <p>封装代码位于：<code>util/bus_util.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">BusUtil</span><span class="token punctuation">{</span>
<span class="token comment">//  发送事件封装</span>
  BusUtil<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span>String name<span class="token punctuation">,</span><span class="token keyword">dynamic</span> data<span class="token punctuation">)</span><span class="token punctuation">{</span>
    FBroadcast<span class="token punctuation">.</span><span class="token function">instance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">broadcast</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span>value<span class="token punctuation">:</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

<span class="token comment">//  注册事件封装</span>
  BusUtil<span class="token punctuation">.</span><span class="token keyword">on</span><span class="token punctuation">(</span>String name<span class="token punctuation">,</span><span class="token keyword">Function</span> result<span class="token punctuation">)</span><span class="token punctuation">{</span>
    FBroadcast<span class="token punctuation">.</span><span class="token function">instance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">result</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span>callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>使用示例位于：<code>layout/busManage/bus_manage.dart</code></p> <div class="language-dart extra-class"><pre class="language-dart"><code><span class="token comment">// 发送事件</span>
BusUtil<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'send_event'</span><span class="token punctuation">,</span> textEditingController<span class="token punctuation">.</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 接收事件</span>
BusUtil<span class="token punctuation">.</span><span class="token keyword">on</span><span class="token punctuation">(</span><span class="token string">'send_event'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token comment">// Toast显示数据</span>
	BotToast<span class="token punctuation">.</span><span class="token function">showText</span><span class="token punctuation">(</span>text<span class="token punctuation">:</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>更多丰富用法查看库<a href="https://pub.flutter-io.cn/packages/flustars" target="_blank" rel="noopener noreferrer">flustars<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/flutter-create-framework/guide/directory.html" class="prev">
        目录结构
      </a></span> <span class="next"><a href="/flutter-create-framework/guide/about.html">
        关于
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/flutter-create-framework/assets/js/app.ae50095e.js" defer></script><script src="/flutter-create-framework/assets/js/2.c234afe8.js" defer></script><script src="/flutter-create-framework/assets/js/3.8c79cdc2.js" defer></script>
  </body>
</html>
